<template>
  <div class="home">
    <!-- 声明式路由 -->
    <!-- 不携带参数是可以直接给to属性赋值path地址进行页面跳转 -->
    <!-- <router-link to="/about">进入about页面</router-link> -->
    <!-- 
      携带参数时
      第一种query携带参数 参数会以key=value&key=value的形式表现url地址上 可以和path以及name合作传递参数
      第二种params携带参数 不能和path合用携带参数可以和name合作传递参数 params参数并不会显示在url地址上
     -->
    <!-- <router-link :to="{
      path: '/about',
      query: {
        id: new Date().getTime(),
        page: 1,
        size: 10
      }
    }">进入about页面</router-link> -->
    <!-- <router-link :to="{
      name: 'About',
      params: {
        id: new Date().getTime(),
        page: 1,
        size: 10
      }
    }">进入about页面</router-link> -->
    <!-- <router-link :to="{
      name: 'About',
      query: {
        id: new Date().getTime(),
        page: 1,
        size: 10
      }
    }">进入about页面</router-link> -->
    <!-- 
      编程式路由 使用js方法进行路由跳转 通过事件触发
      编程式路由和声明式路由的跳转规则是一样的
       -->
    <!-- <button @click="goAbout">进入about页面</button> -->
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods: {
    goAbout() {
      this.$router.push({
        name: 'About',
        query: {
          id: new Date().getTime(),
          page: 1,
          size: 10
        }
      })
    }
  }
}
</script>
